<template>
	<view class="container">
		<view class="title">请选择类型</view>
		<view class="">
			<view class="" v-for="(item,index) in menuList" :key="index"
				style="display: flex;margin: 20rpx 0;align-items: center;" @click="itemClick(item,index)">
				<image v-if="!item.disbabled" src="https://oss.taoding1688.com/static/uniapp/static/commission/radio.png" mode="widthFix"
					style="width: 40rpx;"></image>
				<image v-else src="https://oss.taoding1688.com/static/uniapp/static/commission/radiob.png" mode="widthFix" style="width: 40rpx;"></image>
				<view class="" style="font-size: 26rpx;margin-left: 20rpx;">{{item.name}}</view>
			</view>
			<!-- <view class="textarea-counter">{{descNum}}/500</view> -->
		</view>
		<view class="title">问题描述</view>
		<view class="tui-cells">
			<textarea class="tui-textarea" placeholder="我希望加入XXXX功能，因为XX情况下，会出现XX异常" maxlength="200"
				placeholder-class="phcolor" v-model="content" />
			<!-- <view class="textarea-counter">{{descNum}}/500</view> -->
			<tn-image-upload ref="imageUpload" :action="serverUrl" :maxCount="9" :header="header" :formData="formData"
				@on-success="onSuccess"></tn-image-upload>
		</view>
		<view class="title top64">联系电话</view>
		<input class="tui-input" placeholder-class="phcolor" placeholder="请输入电话" v-model="phone" maxlength="20"></input>
		<view class="tui-ptop">
			<tui-button type="danger" shadow height="88rpx" shape="circle" @click="submit">提交反馈</tui-button>
		</view>
	</view>

</template>

<script>
	import {
		getToken
	} from "@/util/auth"
	const form = require("@/components/common/tui-validation/tui-validation.js")
	import {
		getShopFeedbacke
	} from "@/apis"
	export default {
		computed: {
			descNum: function() {
				return this.desc.length
			}
		},
		onLoad(options) {

		},
		data() {
			return {
				serverUrl: "https://www.taoding1688.com/api/common/upload",
				value: [], //初始化图片
				header: {
					'token': getToken()
				},
				list: [],
				formData: {
					'group': 'ugc', // 其他要传的参数
				},
				content: "",
				phone: "",
				menuList: [{
						name: "产品功能问题反馈",
						disbabled: false
					},
					{
						name: "建议及意见反馈",
						disbabled: false
					},
					{
						name: "投诉客服其他问题",
						disbabled: false
					}
				],
				type: ''
			}
		},
		methods: {
			onSuccess(data, index, lists, name) {
				this.list = lists.map(item => {
					return item.response.data.url
				})
			},
			itemClick(item, index) {
				this.menuList.map(item => item.disbabled = false)
				this.menuList[index].disbabled = !this.menuList[index].disbabled
				this.type = item.name
			},
			async submit() {
				if (!this.type) {
					uni.showToast({
						title: '请选择类型',
						icon:"none"
					})
					return
				}
				if (!this.content) {
					uni.showToast({
						title: '请输入描述',
						icon:"none"
					})
					return
				}
				if (!this.phone) {
					uni.showToast({
						title: '请选择联系方式',
						icon:"none"
					})
					return
				}

				let obj = {
					type: this.type,
					content: this.content,
					phone: this.phone,
					images: this.list
				}
				
				let res=await getShopFeedbacke(obj)
				if (res.code==1) {
					uni.showToast({
						title: res.msg,
						icon:"none"
					})
					uni.navigateBack({
						delta:1
					})
				}

			}
		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	.container {
		background-color: #fff;
		margin-top: 22rpx;
		padding: 30rpx;
		box-sizing: border-box;
		padding-bottom: 162rpx
	}

	.title {
		font-size: 30rpx;
		color: #666;
		padding-bottom: 12rpx;
	}

	.tui-cells {
		border: 1rpx solid #e6e6e6;
		border-radius: 4rpx;
		/* height: 280rpx; */
		box-sizing: border-box;
		padding: 20rpx 20rpx 0 20rpx;
	}

	.tui-textarea {
		height: 210rpx;
		width: 100%;
		color: #666;
		font-size: 28rpx;
	}

	.pholder {
		color: #ccc;
	}

	.textarea-counter {
		font-size: 24rpx;
		color: #999;
		text-align: right;
		height: 40rpx;
		line-height: 40rpx;
		padding-top: 4rpx;
	}

	.top64 {
		margin-top: 64rpx;
	}

	.tui-input {
		font-size: 30rpx;
		height: 88rpx;
		border: 1rpx solid #e6e6e6;
		border-radius: 4rpx;
		padding: 0 25rpx;
		box-sizing: border-box;
	}

	.tui-ptop {
		padding-top: 80rpx;
	}
</style>